<template>
  <view class="sk-container">
    <view class="pageBgColor film-msg-detail data-v-34cde21c">
      <view
        class="u-navbar index--u-navbar data-v-20c0baca index--data-v-20c0baca"
      >
        <view
          class="data-v-20c0baca index--data-v-20c0baca u-navbar--fixed index--u-navbar--fixed"
        >
          <view
            class="u-status-bar statusBar--u-status-bar data-v-6f3b408a statusBar--data-v-6f3b408a"
            style="height: 44px; background: transparent"
          ></view>
          <view
            class="u-navbar__content index--u-navbar__content data-v-20c0baca index--data-v-20c0baca false index--false"
            style="height: 44px; background: transparent"
          >
            <view
              class="u-navbar__content__left index--u-navbar__content__left data-v-20c0baca index--data-v-20c0baca"
            >
              <view
                class="u-icon icon--u-icon data-v-172979f2 icon--data-v-172979f2 u-icon--right icon--u-icon--right"
              >
                <text
                  class="u-icon__icon icon--u-icon__icon data-v-172979f2 icon--data-v-172979f2 uicon-arrow-left icon--uicon-arrow-left sk-transparent sk-text-0-0000-291 sk-text"
                  style="
                    font-size: 20px;
                    line-height: 20px;
                    font-weight: normal;
                    top: 0px;
                    color: #fff;
                  "
                  ></text
                >
              </view>
            </view>
            <text
              class="u-line-1 index--u-line-1 u-navbar__content__title index--u-navbar__content__title ell index--ell data-v-20c0baca index--data-v-20c0baca"
              style="width: 200px; color: "
            ></text>
          </view>
        </view>
      </view>
      <view class="bg-img data-v-34cde21c">
        <view class="data-v-34cde21c">
          <view
            class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
            style="width: 375px; height: 274px"
          >
            <view
              class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
              style="
                transition-duration: 0ms;
                transition-timing-function: ease-out;
              "
            >
              <view
                class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                style="
                  width: 100%;
                  height: 100%;
                  border-radius: ;
                  overflow: visible;
                  background-color: transparent;
                "
              >
                <image
                  class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                  lazy-load="true"
                  mode="aspectFill"
                  show-menu-by-longpress="true"
                  style="border-radius: ; width: 100%; height: 100%"
                ></image>
              </view>
            </view>
          </view>
        </view>
        <view class="play-btn data-v-34cde21c">
          <view class="data-v-34cde21c">
            <view
              class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
              style="width: 50px; height: 50px"
            >
              <view
                class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
                data-ref="u-transition"
                style="
                  transition-duration: 0ms;
                  transition-timing-function: ease-out;
                "
              >
                <view
                  class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                  style="
                    width: 100%;
                    height: 100%;
                    border-radius: ;
                    overflow: visible;
                    background-color: transparent;
                  "
                >
                  <image
                    class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                    lazy-load="true"
                    mode="aspectFill"
                    show-menu-by-longpress="true"
                    style="border-radius: ; width: 100%; height: 100%"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bc-white film-model data-v-34cde21c">
        <view class="flex flex-bottom mb30 data-v-34cde21c">
          <view
            class="film-name fs34 fb data-v-34cde21c sk-transparent sk-text-14-2857-314 sk-text"
            >独行月球</view
          >
          <view class="flex flex-m flex-right data-v-34cde21c">
            <view class="data-v-34cde21c">
              <view
                class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
                style="width: 12px; height: 12px; margin-right: 5px"
              >
                <view
                  class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
                  data-ref="u-transition"
                  style="
                    transition-duration: 0ms;
                    transition-timing-function: ease-out;
                  "
                >
                  <view
                    class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                    style="
                      width: 100%;
                      height: 100%;
                      border-radius: ;
                      overflow: visible;
                      background-color: transparent;
                    "
                  >
                    <image
                      class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                      lazy-load="true"
                      mode="aspectFill"
                      show-menu-by-longpress="true"
                      style="border-radius: ; width: 100%; height: 100%"
                    ></image>
                  </view>
                </view>
              </view>
            </view>
            <view
              class="fc-yellow data-v-34cde21c sk-transparent sk-text-14-2857-926 sk-text"
              >8.1分</view
            >
          </view>
        </view>
        <view class="flex mb40 data-v-34cde21c">
          <view class="film-msg flex-1 data-v-34cde21c">
            <view
              class="label fs20 mb10 data-v-34cde21c sk-transparent sk-text-14-2857-531 sk-text"
              >片长</view
            >
            <view
              class="content fs24 data-v-34cde21c sk-transparent sk-text-14-2857-343 sk-text"
              >120分钟</view
            >
          </view>
          <view class="film-msg flex-1 data-v-34cde21c">
            <view
              class="label fs20 mb10 data-v-34cde21c sk-transparent sk-text-14-2857-138 sk-text"
              >语言</view
            >
            <view
              class="content fs24 data-v-34cde21c sk-transparent sk-text-14-2857-163 sk-text"
              >中文</view
            >
          </view>
          <view class="film-msg flex-1 data-v-34cde21c">
            <view
              class="label fs20 mb10 data-v-34cde21c sk-transparent sk-text-14-2857-275 sk-text"
              >类型</view
            >
            <view
              class="content fs24 ell pr10 data-v-34cde21c sk-transparent sk-text-14-2857-524 sk-text"
              >科幻</view
            >
          </view>
          <view class="film-msg flex-1 data-v-34cde21c">
            <view
              class="label fs20 mb10 data-v-34cde21c sk-transparent sk-text-14-2857-357 sk-text"
              >上映时间</view
            >
            <view
              class="content fs24 data-v-34cde21c sk-transparent sk-text-14-2857-288 sk-text"
              >2022-08-07</view
            >
          </view>
        </view>
        <view class="film-stills mb40 data-v-34cde21c">
          <view class="flex flex-m mb25 data-v-34cde21c">
            <view
              class="fs32 fb data-v-34cde21c sk-transparent sk-text-14-2857-385 sk-text"
              >剧照</view
            >
            <view
              class="flex-right flex fc8 flex-m data-v-34cde21c sk-transparent sk-text-14-2857-947 sk-text"
              >全部(3)</view
            >
            <view
              class="u-icon icon--u-icon data-v-172979f2 icon--data-v-172979f2 u-icon--right icon--u-icon--right"
            >
              <text
                class="u-icon__icon icon--u-icon__icon data-v-172979f2 icon--data-v-172979f2 uicon-arrow-right icon--uicon-arrow-right sk-transparent sk-text-0-0000-582 sk-text"
                style="
                  font-size: 16px;
                  line-height: 16px;
                  font-weight: normal;
                  top: 0px;
                  color: #888;
                "
                ></text
              >
            </view>
          </view>
          <scroll-view
            class="flex film-stills-scroll data-v-34cde21c"
            scroll-x="true"
          >
            <view class="mr20 film-still-item data-v-34cde21c">
              <view class="data-v-34cde21c">
                <view
                  class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
                  style="width:115px;height:80px;null"
                >
                  <view
                    class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
                    data-ref="u-transition"
                    style="
                      transition-duration: 0ms;
                      transition-timing-function: ease-out;
                    "
                  >
                    <view
                      class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                      style="
                        width: 100%;
                        height: 100%;
                        border-radius: ;
                        overflow: visible;
                        background-color: transparent;
                      "
                    >
                      <image
                        class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                        lazy-load="true"
                        mode="aspectFill"
                        show-menu-by-longpress="true"
                        style="border-radius: ; width: 100%; height: 100%"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="mr20 film-still-item data-v-34cde21c">
              <view class="data-v-34cde21c">
                <view
                  class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
                  style="width:115px;height:80px;null"
                >
                  <view
                    class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
                    data-ref="u-transition"
                    style="
                      transition-duration: 0ms;
                      transition-timing-function: ease-out;
                    "
                  >
                    <view
                      class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                      style="
                        width: 100%;
                        height: 100%;
                        border-radius: ;
                        overflow: visible;
                        background-color: transparent;
                      "
                    >
                      <image
                        class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                        lazy-load="true"
                        mode="aspectFill"
                        show-menu-by-longpress="true"
                        style="border-radius: ; width: 100%; height: 100%"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="mr20 film-still-item data-v-34cde21c">
              <view class="data-v-34cde21c">
                <view
                  class="zm-image ZmImage-index--zm-image data-v-1d203946 ZmImage-index--data-v-1d203946"
                  style="width:115px;height:80px;null"
                >
                  <view
                    class="u-transition transition--u-transition data-v-39e33bf2 transition--data-v-39e33bf2 vue-ref transition--vue-ref u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
                    data-ref="u-transition"
                    style="
                      transition-duration: 0ms;
                      transition-timing-function: ease-out;
                    "
                  >
                    <view
                      class="u-image image--u-image data-v-6dd0d12f image--data-v-6dd0d12f"
                      style="
                        width: 100%;
                        height: 100%;
                        border-radius: ;
                        overflow: visible;
                        background-color: transparent;
                      "
                    >
                      <image
                        class="u-image__image image--u-image__image data-v-6dd0d12f image--data-v-6dd0d12f sk-image"
                        lazy-load="true"
                        mode="aspectFill"
                        show-menu-by-longpress="true"
                        style="border-radius: ; width: 100%; height: 100%"
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="mb40 data-v-34cde21c">
          <view
            class="fs32 fb mb25 data-v-34cde21c sk-transparent sk-text-14-2857-999 sk-text"
            >演职人员</view
          >
          <view
            class="flex fs24 flex-m fc8 mb10 data-v-34cde21c sk-transparent sk-text-14-2857-564 sk-text"
            >导演：张吃鱼</view
          >
          <view
            class="flex fs24 flex-m fc8 lh46 data-v-34cde21c sk-transparent sk-text-23-9130-249 sk-text"
            >主演：沈腾/马丽/常远/张吃鱼</view
          >
        </view>
        <view class="data-v-34cde21c">
          <view
            class="fs32 fb mb25 data-v-34cde21c sk-transparent sk-text-14-2857-968 sk-text"
            >简介</view
          >
          <view
            class="fc8 fs26 lh46 data-v-34cde21c sk-transparent sk-text-21-7391-659 sk-text"
            >《独行月球》是由张吃鱼执导，沈腾、马丽主演的科幻喜剧片，改编自韩国漫画家赵石创作的同名漫画。该片讲述了人类为抵御小行星的撞击，拯救地球，在月球部署了月盾计划。陨石提前来袭，全员紧急撤离时，维修工独孤月因为意外，错过了领队马蓝星的撤离通知，一个人落在了月球。不料月盾计划失败，独孤月成为了“宇宙最后的人类”，开始了他在月球上破罐子破摔的生活。该片于2022年7月29日在中国大陆上映。</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style scoped lang="scss">
  .film-msg-detail {
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 60rpx;
    overflow-y: auto;
  }
  .bg-img {
    height: 548rpx;
    position: relative;
    z-index: 10;
    .play-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50rpx;
      margin-top: -10rpx;
    }
  }
  .film-model {
    min-height: calc(100vh - 650rpx);
    position: relative;
    margin-top: -60rpx;
    width: 100%;
    border-radius: 30rpx 30rpx 0 0;
    // min-height: 200rpx;
    z-index: 20;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 36rpx;
  }
  .film-msg {
    .label {
      color: #888;
    }
    .content {
      color: #333;
      box-sizing: border-box;
    }
  }

  .film-stills-scroll {
    width: 100%;
    white-space: nowrap;
    .film-still-item {
      width: 230rpx;
      height: 160rpx;
      display: inline-block;
    }
  }
  .btn {
    margin: 0 30rpx;
    height: 100rpx;
    border-radius: 20rpx;
    z-index: 100;
  }
  .sk-transparent {
    color: transparent !important;
  }
  .sk-text-0-0000-291 {
    background-image: linear-gradient(
      transparent 0%,
      #eeeeee 0%,
      #eeeeee 100%,
      transparent 0%
    ) !important;
    background-size: 100% 40rpx;
    position: relative !important;
  }
  .sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
    // background-image: linear-gradient(
    //   90deg,
    //   #ff0000 25%,
    //   #41de6a 37%,
    //   #ff0000 63%
    // ) !important;
    // background-size: 400% 100%;
    // border-radius: 3px;
    // animation: skeleton-loading 1.4s ease infinite;
  }
  @keyframes skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  .sk-text-14-2857-314 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-position: 100% 50%;
    // animation: skeleton-loading 1.4s ease infinite;
    background-size: 100% 47.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-926 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
  }
  .sk-text-14-2857-531 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 28rpx;
    position: relative !important;
  }
  .sk-text-14-2857-343 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-138 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 28rpx;
    position: relative !important;
  }
  .sk-text-14-2857-163 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-275 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 28rpx;
    position: relative !important;
  }
  .sk-text-14-2857-524 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-357 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 28rpx;
    position: relative !important;
  }
  .sk-text-14-2857-288 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-385 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 44.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-947 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
  }
  .sk-text-0-0000-582 {
    background-image: linear-gradient(
      transparent 0%,
      #eeeeee 0%,
      #eeeeee 100%,
      transparent 0%
    ) !important;
    background-size: 100% 32rpx;
    position: relative !important;
  }
  .sk-text-14-2857-999 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 44.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-564 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-23-9130-249 {
    background-image: linear-gradient(
      transparent 23.913%,
      #eeeeee 0%,
      #eeeeee 76.087%,
      transparent 0%
    ) !important;
    background-size: 100% 46rpx;
    position: relative !important;
  }
  .sk-text-14-2857-968 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 44.8rpx;
    position: relative !important;
  }
  .sk-text-21-7391-659 {
    background-image: linear-gradient(
      transparent 21.7391%,
      #eeeeee 0%,
      #eeeeee 78.2609%,
      transparent 0%
    ) !important;
    background-size: 100% 46rpx;
    position: relative !important;
  }
  .sk-image {
    background: #efefef !important;
  }
  .sk-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }
  // view[target='sk-text-'] {
  //   animation: skeleton-loading 1.4s ease infinite;
  //   background: linear-gradient(
  //     90deg,
  //     #f1f2f4 25%,
  //     #e6e6e6 37%,
  //     #f1f2f4 50%
  //   ) !important;
  //   background-size: 400% 100% !important;
  //   background-position: 100% 50%;
  //   animation: skeleton-loading 1.4s ease infinite;
  // }
</style>
